<template>
  <div>
    <h1>微信公众号的二维码+扫码登录页面</h1>
    <hr/>
    <div class="qrCode" 
      v-loading="loadCode"
      element-loading-text="拼命加载中">
        <iframe class="wh100 box" id="frame" src="./qrCode.html" scrolling="no" ></iframe>
    </div>
  </div>
</template>

<script>

// https://blog.csdn.net/helloxiaoliang/article/details/126865344

export default {
  data(){
    return {
      loadCode: true,
    }
  },
  created(){
    let timer = setTimeout(()=>{
      this.loadCode = false;
      clearTimeout(timer);
    }, 2000)

    // 轮询后台，看用户是否扫码成功
    this.loopFun()
  },
  methods:{
    sleep(dealy){
      return new Promise((res, rej)=>{
        let tm = setTimeout(()=>{
          clearTimeout(tm)
          res()
        }, dealy)
      })
    },
    async loopFun(){
      // 根据本地存储的myid区分用户,在生成二维码的时候存储的，也传给后台了
      let myid = sessionStorage.getItem('myid') || 'a'
      console.log('myid', myid);
      let rel = await this.$axios.get(`${window.baseApi}/Login?myid=${myid}`)
      console.log('是否登录：',rel);
      
      // 这里搭配.net版本的
      // 这里搭配python django版本的05.24
      if(rel && rel.data==true){
        this.$message({
          message: '登录成功',
          type: "success"
        })
        this.$router.push('/home')
        return
      }

      // 如果还没登录，休眠3s再问一次
      if(!rel || (rel && !rel.data) || !rel.data.login){
        // 休眠3s
        await this.sleep(3000)
        this.loopFun()
      } else {
        // 如果扫码了，跳转页面
        // 这里搭配java版本的
        this.$message({
          message: '登录成功',
          type: "success"
        })
        this.$router.push('/home')
      }
    }
  }

}
</script>
<style>
  /* 
    该样式能调整二维码大小，太神奇了
    网友的建议 https://m.656463.com/wenda/rhsyymjxiframesf_600
  */
  #frame { 
    width: 450px; height: 450px; 
    position:relative; left:-8px; top: -8px;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
  }
</style>

<style scoped>
  .wh100{
    width: 100%;
    height: 100%;
  }
  
  .box{
    border: none;
    overflow: hidden;
  }
  .qrCode{
    border: 1px solid #ddd;
    width: 200px;
    height: 200px;
    margin: 20px auto;
    overflow: hidden;
  }
</style>